<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta content="email=no" name="format-detection"/>
    <title>爱趣分期</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/web/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/web/css/css.css">
</head>
<body>
<div class="swiper-container swiper-banner" id="banner">
    <div class="swiper-wrapper">
        <volist name="data['img']" id="voimg">
            <div class="swiper-slide">
                <img src="{$voimg}">
            </div>
        </volist>
    </div>
    <p class="swiper-detail">
        <span class="left">出发地·{$data.base}</span>
        <span class="right">{$data.type}</span>
    </p>
    <div class="swiper-pagination"></div>
</div>
<div class="main">
    <div class="title">
        <h1>{$data.name}</h1>
        <p class="title-detail">&yen;<strong>{$data.Price.0.price}</strong>起/人<span class="tag">限时促销</span></p>
        <p>该商品最高可享12期免息分期</p>
    </div>
</div>




<div class="content">
    <div class="nav">
        <div class="swiper-title">
            <div class="swiper-slide  active-nav">
                <a href="#price">费用信息</a>
            </div>
            <div class="swiper-slide ">
                <a href="#route">路程特色</a>
            </div>
            <div class="swiper-slide ">
                <a href="#project">旅行日程</a>
            </div>
            <div class="swiper-slide swiper-slide-prev ">
                <a href="#more">预定须知</a>
            </div>
        </div>
    </div>
    <div class="swiper-slide-box" id="price">
            {$data.Series}
    </div>
</div>
<div class="main" id="route">
    <h2>路线特色</h2>
        <volist name="data['special']" id="vosp">
            <p>
                {$vosp}
            </p>
        </volist>
</div>
<div class="main project" id="project">
    <h2>旅行日程</h2>
    <ul>
        <volist name="data['Travel']" id="votral">
             <li class="flex">
                <div class="left">
                    第{$votral.travel_time}天
                </div>
                <div class="right flex-child">
                    <p>{$votral.travel}</p>
                    <div class="project-detail">
                        <p class="text-index">
                            {$votral.detail}
                        </p>
                        <p>{$votral.food}   {$votral.stay} </p>
                    </div>
                </div>
            </li>
        </volist>
        <li class="flex">
            <div class="left">
                旅行结束
            </div>
        </li>
    </ul>
</div>
<div class="main" id="more">
    {$data.notice}
</div>








<div class="top">
    <a href="#"></a>
</div>
<footer>
    <button>打开爱趣分期，查看出游详情</button>
</footer>
<script src="__PUBLIC__/web/javascript/swiper.min.js"></script>
<script src="__PUBLIC__/web/javascript/zepto.js"></script>
<script>
    var mySwiper = new Swiper('#banner', {
        autoplay: 50000,//可选选项，自动滑动
        pagination: '.swiper-pagination',
        paginationType: 'bullets',
        loop: true
    });
    var mySwiper2 = new Swiper('#swiper-container2', {
        watchSlidesProgress: true,
        watchSlidesVisibility: true,
        slidesPerView: 0,
        onTap: function () {
            mySwiper3.slideTo(mySwiper2.clickedIndex)
        }
    });
    var mySwiper3 = new Swiper('#swiper-container3', {
        onSlideChangeStart: function () {
            updateNavPosition()
        }
    });

    function updateNavPosition() {
        $('#swiper-container2 .active-nav').removeClass('active-nav');
        var height = $('#swiper-container3 .swiper-slide-active .swiper-slide-box').height();
        $('#swiper-container3').css('height', height + 'px');
        console.log(height);
        var activeNav = $('#swiper-container2 .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav');
        if (!activeNav.hasClass('swiper-slide-visible')) {
            console.log(1);
            if (activeNav.index() > mySwiper2.activeIndex) {
                console.log(2);
                var thumbsPerNav = Math.floor(mySwiper2.width / activeNav.width()) - 1;
                mySwiper2.slideTo(activeNav.index() - thumbsPerNav)
            }
            else {
                console.log(3);
                mySwiper2.slideTo(activeNav.index())
            }
        }
        function active() {

        }
    }
    //查看是否安装诚信分期
    //    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
    //        var loadDateTime = new Date();
    //        window.setTimeout(function () {
    //                    var timeOutDateTime = new Date();
    //                    if (timeOutDateTime - loadDateTime < 5000) {
    ////                        window.location = "要跳转的页面URL";
    //                    } else {
    ////                        window.close();
    //                    }
    //                },
    //                25);
    //        window.location = " apps custom url schemes ";
    //    } else if (navigator.userAgent.match(/android/i)) {
    //        var state = null;
    //        try {
    //            state = window.open("apps custom url schemes ", '_blank');
    //        } catch (e) {
    //        }
    //        if (state) {
    //            window.close();
    //        } else {
    ////            window.location = "要跳转的页面URL";
    //        }
    //    }

</script>
</body>
</html>